import {
    Select, Card, Form, Row, Col, Input, Button, Icon, Table, Divider, Menu, Dropdown, Modal, Radio, Checkbox
} from 'antd';
import api from '@/framework/axios';//请求接口的封装
import BaseForm from '@/components/baseForm';

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: {},
            modal1: {
                show: false,
                input: ""
            }
        }
    }

    formList = [
        {
            type: 'INPUT',
            field: 'name',
            label: '姓名',
            placeholder: '请输入账户名'
        },
        {
            type: 'RANGE',
            field: 'times',
            label: '时间段',
            placeholder: '请选择筛选时间段'
        },
        {
            type: 'SELECT',
            field: 'sex',
            label: '性别',
            placeholder: '请选择',
            list: [{ id: '0', name: '男' }, { id: '1', name: '女' }]
        },
    ]

    componentWillMount() {
        console.log("生命周期函数", "初始化");
        this.handleSubmit();
    }

    handleSubmit = (page, pageSize, event) => {
        event && event.preventDefault();
        api.ajax('GET', '@/table/list', {
            ...this.props.form.getFieldsValue(),
            page, pageSize
        }).then(r => {
            console.log(r);
            this.setState({
                dataSource: r
            })
        })
    }

    handleFilter = (params) => {
        console.log(params);
    }

    openModal1 = (open) => {
        this.setState({
            modal1: {
                ...this.state.modal1, show: open
            }
        })
    }
    modal1Handle = (ok) => {
        if (ok) {
            this.props.form.setFieldsValue({
                name: this.state.modal1.input
            });
            this.openModal1(!ok)
        } else {
            this.openModal1(ok)
        }
    }
    modal1HandleInput = (event) => {
        this.setState({
            modal1: {
                ...this.state.modal1, input: event.target.value
            }
        });
    }
    onShowSizeChange = (page, pageSize) => {
        this.handleSubmit(page, pageSize);
    }

    onChange = (page, pageSize) => {
        this.handleSubmit(page, pageSize);
    }


    columns = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'id',
    }, {
        title: '年龄',
        dataIndex: 'age',
        key: 'sex',
    }, {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
    }, {
        title: '电话',
        dataIndex: 'phoneNumber',
        key: 'birthday',
    }, {
        title: '操作',
        key: 'operation',
        render: (text, record) => (
            <span>
                <a href="#">操作一{record.name}</a>
                <span className="ant-divider"></span>
                <a href="#">操作二</a>
                <span className="ant-divider"></span>
                <a href="#" className="ant-dropdown-link">
                    更多 <Icon type="down" />
                </a>
            </span>
        ),
    }];

    render() {
        const { getFieldProps } = this.props.form;
        const pagination = ComponentDefine.getPagination_(this.state.dataSource, this.onShowSizeChange, this.onChange);
        return (
            <div>
                <Card>
                    {/* <Form inline onSubmit={this.handleSubmit.bind(this, 1, pagination.defaultPageSize)}>
                        <Form.Item
                            label="姓名"
                        >
                            <Input placeholder="请输入账户名"
                                {...getFieldProps('name', {
                                })}
                            />
                        </Form.Item>
                        <Button type="primary" htmlType="submit">查询</Button>
                    </Form> */}
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilter} />
                </Card>
                <Card>
                    <div className="operation_btns padding_bottom_24">
                        <Button onClick={this.openModal1.bind(this, true)}>添加</Button>
                        <Button onClick={this.goContent1}>详情1</Button>
                        <Button onClick={this.goContent2}>详情2</Button>
                    </div>
                    <Table rowKey="id"
                        {...ComponentDefine.table_}
                        pagination={pagination}
                        dataSource={this.state.dataSource.result}
                        columns={this.columns} />
                </Card>
                <Modal title="二三级操作-模态框" visible={this.state.modal1.show}
                    onOk={this.modal1Handle.bind(this, true)} onCancel={this.modal1Handle.bind(this, false)}
                >
                    <Input value={this.state.modal1.input} onChange={this.modal1HandleInput} />
                </Modal>
            </div>
        )
    }
}

export default Form.create()(Demo)